<template>
  <div class="flow-menu" ref="tool">
    <div v-for="(menu, index) in menuList" :key="index">
      <span class="ef-node-pmenu" @click="menu.open = !menu.open"
        >{{ menu.name
        }}<i
          :class="{
            V7_iconV7tubiao_shang: menu.open,
            V7_iconV7tubiao_xiaa: !menu.open,
            V7_iconfont: true
          }"
        ></i>
      </span>
      <ul v-show="menu.open" class="ef-node-menu-ul">
        <draggable
          @end="end"
          @start="move"
          v-model="menu.children"
          :options="draggableOptions"
        >
          <li
            v-for="(subMenu, index) in menu.children"
            class="ef-node-menu-li"
            :key="index"
            :type="subMenu.type"
          >
            <icon-svg :icon-class="subMenu.ico" />{{ subMenu.name }}
          </li>
        </draggable>
      </ul>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
import draggable from 'vuedraggable'
interface MenuChild {
  type: 'im-node-date' | 'im-node-transfer' | 'im-node-menu' | 'im-node-robot' | 'im-node-leave' | 'im-node-branch',
  name: string,
  ico: string
}
interface MenuListObj {
  type: 'group',
  name: string,
  ico: string,
  // 是否展开
  open: boolean,
  children: MenuChild[]
}
const mousePosition = {
  left: -1,
  top: -1
}
@Component({
  name: 'NodeMenu',
  components: { draggable }
})
export default class NumberManage extends Vue {
  private created () {
    /**
     * 以下是为了解决在火狐浏览器上推拽时弹出tab页到搜索问题
     * @param event
     */
    if (this.isFirefox()) {
      document.body.ondrop = (event: any) => {
        // 解决火狐浏览器无法获取鼠标拖拽结束的坐标问题
        mousePosition.left = event.layerX
        mousePosition.top = event.clientY - 50
        event.preventDefault()
        event.stopPropagation()
      }
    }
  }

  private activeNames = '1'
  // draggable配置参数参考 https://www.cnblogs.com/weixin186/p/10108679.html
  private draggableOptions = {
    preventOnFilter: false,
    sort: false,
    disabled: false,
    ghostClass: 'tt',
    // 不使用H5原生的配置
    forceFallback: true
    // 拖拽的时候样式
    // fallbackClass: 'flow-node-draggable'
  }

  // 默认打开的左侧菜单的id
  private defaultOpeneds = ['1', '2']

  private menuList: MenuListObj[] = [
    {
      type: 'group',
      name: '常用节点',
      ico: 'el-icon-video-play',
      open: true,
      children: [
        {
          type: 'im-node-date',
          name: '时间条件',
          ico: 'shijiantiaojian'
        },
        {
          type: 'im-node-transfer',
          name: '转人工',
          ico: 'zhuanrengong1'
        },
        {
          type: 'im-node-menu',
          name: '引导菜单',
          ico: 'fenzhipanduan'
        },
        {
          type: 'im-node-leave',
          name: '留言节点',
          ico: 'liuyan'
        },
        {
          type: 'im-node-robot',
          name: '机器人',
          ico: 'jiqiren'
        },
        {
          type: 'im-node-branch',
          name: '分支路由',
          ico: 'tiaojianjiedian'
        }
      ]
    }
  ]

  private nodeMenu: any = {}

  // 根据类型获取左侧菜单对象
  private getMenuByType (type): MenuChild | undefined {
    for (let i = 0; i < this.menuList.length; i++) {
      const children = this.menuList[i].children
      for (let j = 0; j < children.length; j++) {
        if (children[j].type === type) {
          return children[j]
        }
      }
    }
  }

  // 拖拽开始时触发
  private move (evt, a, b, c): void {
    const type = evt.item.attributes.type.nodeValue
    this.nodeMenu = this.getMenuByType(type)
  }

  // 拖拽结束时触发
  private end (evt, e): void {
    this.$emit('addNode', evt, this.nodeMenu, mousePosition)
  }

  // 是否是火狐浏览器
  private isFirefox (): boolean {
    const userAgent = navigator.userAgent
    if (userAgent.indexOf('Firefox') > -1) {
      return true
    }
    return false
  }
}
</script>

<style lang="stylus" scoped>
.flow-menu
  position absolute
  z-index 100
  background white
  left 20px
  top 150px
  padding 0 15px 15px
  border 1px solid #E6EAED
  border-radius 4px
/* 节点菜单 */
.ef-node-pmenu
  cursor pointer
  height 44px
  line-height 44px
  display block
  font-weight bold
  color #303753
  display flex
  justify-content space-between
  width 100px
  font-weight 600
  font-size 14px
  .V7_iconfont
    font-size 12px
    color #e0e3e7
.ef-node-pmenu:hover
  // background-color #E0E0E0
.ef-node-menu-li
  color #565758
  // border 1px dashed #E0E3E7
  border-radius 5px
  padding-left 8px
  display flex
  align-items center
  font-size 14px
  font-weight 400
  height 32px
  line-height 32px
  .svg-icon
    margin-right 8px
.ef-node-menu-li:hover
  /* 设置移动样式 */
  cursor move
  background-color #F0F7FF
  // border 1px dashed #1879FF
  // border-left 4px solid #1879FF
  // padding-left 5px
.ef-node-menu-ul
  list-style none
</style>
<style lang='stylus'>
.flow-menu
  .svg-icon
    font-size 17px
</style>
